<template>
	<view class="content">
		<div class="image">
			<swiper class="swiper" circular indicator-dots="true" indicator-color="white" :autoplay="true"
				:interval="5000" :duration="2000">
				<swiper-item v-for="(image, index) in images" :key="index">
					<image :src="image" class="img-responsive"></image>
				</swiper-item>
			</swiper>
		</div>
		<div>5412512123136</div>
		<view class="header">
			<!-- Top navigation bar with back button and title -->
			<view class="nav-bar">
				<view class="back-button">〈</view>
				<view class="title">城市</view>
				<view class="extra-button">≡</view>
			</view>
		
			<!-- Search bar -->
			<view class="search-container">
				<input type="text" class="search-input" placeholder="请输入目的地、酒店、景点1" />
			</view>
		
			<!-- Date selection -->
			<view class="date-selection">
				<text>10月21日今天 - 10月23日周日</text>
				<text>共2晚</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				images: [
					'/static///background.jpg',
					'/static///background1.jpg',
					'/static///background2.jpg',
				],
				bannerList: [
					// 这里填充轮播图数据
				],
				productList: [
					// 这里填充商品列表数据
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: aqua;
	}

	.swiper {
		position: relative;
	}

	.image {
		width: 100%;
		background-color: blanchedalmond;
	}

	.img-responsive {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	.header {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		font-size: 20px;
	}

	.back-button,
	.extra-button {
		font-weight: bold;
	}

	.title {
		font-size: 16px;
	}

	.search-container {
		display: flex;
		justify-content: center;
		padding: 10px;
	}

	.search-input {
		width: 100%;
		padding: 10px;
		border: 1px solid #EFEFEF;
		border-radius: 4px;
		font-size: 14px;
	}

	.date-selection {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		font-size: 14px;
	}
</style>